<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>

    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>

    <script type="text/javascript">
      var language = window.sankore ? sankore.locale().substr(0,2) : "en";

      function initMap() 
      {
        var map;
        var mapType = null;

        // Default map type can be ROADMAP, SATELLITE, HYBRID or TERRAIN
        var defaultMapType = google.maps.MapTypeId.HYBRID;

        var lat = 46.2;
        var lng = 6.14;
        var zoom = 4;


        var position = new google.maps.LatLng(lat, lng);

        if (window.sankore) {
          lat = parseFloat(window.sankore.preference('latitude', lat));
          lng = parseFloat(window.sankore.preference('longitude', lng));
          zoom = parseFloat(window.sankore.preference('zoom', zoom));  
          mapType = window.sankore.preference('mapTypeId', mapType);

          position = new google.maps.LatLng(lat, lng);
        };


        map = new google.maps.Map(document.getElementById('map'), {
                                  center: position,
                                  zoom: zoom,
                                  mapTypeId: mapType ? mapType : defaultMapType
                                  });


        if (window.sankore) {
          map.addListener('zoom_changed',function()
          { 
            window.sankore.setPreference('zoom', map.getZoom());
          });

          map.addListener('dragend',function()
          { 
            window.sankore.setPreference('latitude', map.getCenter().lat());
            window.sankore.setPreference('longitude', map.getCenter().lng());
          });

          map.addListener('maptypeid_changed',function()
          { 
            window.sankore.setPreference('mapTypeId', map.getMapTypeId());
          });
        }

        window.onresize();
      }

      window.onresize = function() 
      {
        document.getElementById('map').style.width = window.innerWidth + 'px';
        document.getElementById('map').style.height = window.innerHeight + 'px';      
      };

    </script>
  </head>

  <body>
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>

  <script>
    // language has to be set in the URL, hence this way of loading the API
    document.write('\x3Cscript src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjqhXNSem9YdHR2GAb8zx0qHl4S1RsKxE&callback=initMap&language='+language+'">\x3C/script>');
  </script>
</html>
